﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>重置密码</title>
    <link rel="shortcut icon" type="image/vnd.microsoft.icon" href="/resource/apple.ico" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link href="/lobsteruiframe/layuiadmin/layui/css/layui.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/admin.css" rel="stylesheet" />
    <link href="/lobsteruiframe/layuiadmin/style/login.css" rel="stylesheet" />
    <script src="/lobsteruiframe/layuiadmin/layui/layui.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="/jslib/lobster.js"></script>

    <style>
        .layadmin-user-login {
            padding: 0px;
            overflow: hidden
        }

        .layadmin-user-login-main {
            width: 450px;
            align-content: center;
        }

        .content {
            height: 100px;
            width: 100%;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 60px;
        }

        .bznr {
            width: 75px;
        }

        .xh {
            font-size: 18px;
            width: 28px;
            line-height: 28px;
            border-radius: 50%;
            /*   background-color: #1E90FF;*/
            color: white;
            text-align: center;
            margin-left: 50%;
            transform: translateX(-50%);
        }

        .xhtxt {
            font-size: 18px;
            text-align: center;
            color: #666;
        }

        .bzline {
            width: 80px;
            height: 1px;
            border-top: solid #ACC0D8 1px;
            color: #1E90FF;
            transform: translateY(-12px);
        }

        .bggray {
            background-color: #e1e1e1;
        }

        .bgblue {
            background-color: #1E90FF;
        }

        .clgray {
            color: #e1e1e1;
        }

        .clblue {
            color: #1E90FF;
        }

        .bdgray {
            border-color: #e1e1e1;
        }

        .bdblue {
            border-color: #1E90FF;
        }
    </style>
</head>
<body>
    <div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login">
        <div class="content" id="headStep">
        </div>
        <div class="layadmin-user-login-main">
            <div id="step1">
                <div class="layadmin-user-login-box layadmin-user-login-header">
                    <p>用户身份验证</p>
                </div>
                <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-username"></label>
                        <input type="text" name="Name" id="Name" lay-verify="Name" placeholder="姓名" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-list"></label>
                        <input type="text" name="IDCard" id="IDCard" placeholder="身份证号码" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" lay-verify="IDCard" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="IdSubmit">下一步</button>
                    </div>
                </div>
            </div>
            <div id="step2" class="layui-hide">
                <!-- 短信验证-->
                <div class="layadmin-user-login-box layadmin-user-login-header">
                    <p>用户重置密码</p>
                </div>
                <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-cellphone"></label>
                        <input type="text" name="Phone" id="Phone" lay-verify="Phone" placeholder="手机号" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" disabled class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-row">
                            <div class="layui-col-xs7">
                                <label class="layadmin-user-login-icon layui-icon layui-icon-vercode"></label>
                                <input type="text" name="vercode" id="vercode" lay-verify="required" autocomplete="off" placeholder="验证码" class="layui-input msgs">
                            </div>
                            <div class="layui-col-xs5">
                                <div style="margin-left: 10px;">
                                    <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" id="getsmscode">获取验证码</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
                        <input type="password" name="Pswd" id="Pswd" lay-verify="pass" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" placeholder="密码" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-password"></label>
                        <input type="password" name="RePswd" id="RePswd" lay-verify="repass" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" placeholder="确认密码" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="SaveSubmit">提交</button>
                    </div>
                </div>
            </div>

            <div id="step3" class="layui-hide">
                <div class="layadmin-user-login-box layadmin-user-login-header">
                    <h2>密码重置成功</h2>

                </div>
                <div class="layadmin-user-login-box layadmin-user-login-body layui-form">

                    <div class="layui-form-item">
                        <button class="layui-btn layui-btn-fluid" style="background-color: #2b85e4;" lay-submit lay-filter="backSubmit">返回首页登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<script type="text/javascript">
    lobsterlayui.main(['index', 'layer', 'form', 'element'], {
        data: {
            $layui: null,
            step: 0,//当前步骤
            phone: "",//电话
            userId: "",//用户
            paswd: "",//密码
            pswdKey:"",//短信key
        },
        pageload: function () {
            this.initevent();
            this.stepView();
        },
        //初始化事件
        initevent: function () {
            var self = this;
            var layer = this.data.$layui.layer;
            var form = this.data.$layui.form;
            var element = this.data.$layui.element;

            //自定义验证
            form.verify({
                Name: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!value || value.trim().length == 0) {
                        return "姓名不能为空！"
                    }
                },
                IDCard: function (sId) {
                    var len = sId.length, re;
                    var aCity = {
                        11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海",
                        32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南",
                        44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃",
                        63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外"
                    }
                    if (len > 0) {
                        var iSum = 0;
                        if (!/^\d{17}(\d|X|x)$/i.test(sId)) return "你输入的身份证长度或格式错误";
                        sId = sId.replace(/x$/i, "a");
                        if (aCity[parseInt(sId.substr(0, 2))] == null) return "你的身份证地区非法";
                        sBirthday = sId.substr(6, 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2));
                        var d = new Date(sBirthday);
                        if (sBirthday != (d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate())) return "身份证上的出生日期非法";
                        for (var i = 17; i >= 0; i--) iSum += (Math.pow(2, i) % 11) * parseInt(sId.charAt(17 - i), 11);
                        if (iSum % 11 != 1) return "你输入的身份证号非法";
                    } else {
                        return "请输入你的身份证号码！";
                    }
                }
            });
            //获取短信验证码
            var validCode = true;
            $("#getsmscode").click(function () {
                var time = 60;//倒计时60s
                var code = $(this);
                if (validCode) {
                    //后台发送短信验证码
                    lobsterlayui.GET("/admin/v1/usersetup/SendSmsVerCode", { phoneNumber: $('#Phone').val(), smsKey: self.data.pswdKey }).then(data => {
                        layer.msg('短信验证码发送成功');
                        self.data.pswdKey = data.smsKey;

                        //按钮显示倒计时
                        validCode = false;
                        code.attr("disabled", true);
                        var t = setInterval(function () {
                            time--;
                            code.html(time + "秒");
                            if (time == 0) {
                                clearInterval(t);
                                code.html("重新获取");
                                validCode = true;
                                code.removeAttr('disabled');
                            }
                        }, 1000);
                    });
                }
            });
            //身份验证
            form.on('submit(IdSubmit)', function (obj) {
                var field = obj.field;
                console.log(field);
                //验证身份信息获取手机号
                self.getUserPhone(field.Name, field.IDCard).then(res => {
                    self.data.step = 1;
                    self.stepView();
                }).catch(res => {
                    layer.msg(res.msg || '');
                });
            });
            //重置密码
            form.on('submit(SaveSubmit)', function (obj) {
                var field = obj.field;
                field.pswdKey = self.data.pswdKey;
                if (!self.checking(field.Pswd)) {
                    layer.msg('必须包含大小写字母和数字的组合，可以使用特殊字符，长度大于8！');
                    return false;
                }
                //确认密码
                if (field.Pswd !== field.RePswd) {
                    return layer.msg('两次密码输入不一致');
                }
                field.UserId = self.data.userId;
                self.resetPswd(field).then(res => {
                    self.data.step = 2;
                    self.stepView();
                }).catch(res => {
                    layer.msg(res.msg || '');
                })
            })
            //返回首页
            form.on('submit(backSubmit)', function (obj) {
                window.location.href = "/admin/login/Index.html";
            })
        },
        //显示步骤
        stepView: function () {
            var self = this;
            var layui = this.data.$layui;
            var layer = this.data.$layui.layer;
            var form = this.data.$layui.form;
            var element = this.data.$layui.element;

            var getTpl = stepTemp.innerHTML, view = document.getElementById('headStep');
            layui.laytpl(getTpl).render({ step: this.data.step }, function (html) {
                view.innerHTML = html;
                form.render();
            });
            if (self.data.step == 0) {

            } else if (self.data.step == 1) {
                $("#step1").attr('class', 'layui-hide');
                $('#step2').removeClass('layui-hide');
                $("#Phone").val(self.data.phone);
            } else if (self.data.step == 2) {
                $("#step1").attr('class', 'layui-hide');
                $("#step2").attr('class', 'layui-hide');
                $('#step3').removeClass('layui-hide');

            } else if (self.data.step == 3) {
                $("#step1").attr('class', 'layui-hide');
                $("#step2").attr('class', 'layui-hide');
                $("#step3").attr('class', 'layui-hide');
                $('#step4').removeClass('layui-hide');
            }
        },
        //验证身份获取手机号
        getUserPhone: function (name, idCard) {
            var self = this;
            return new Promise((resolve, reject) => {
                lobsterlayui.GET("/admin/v1/usersetup/GetUserPhone", { name: name, idCard: idCard }).then(data => {
                    self.data.phone = data.Phone;
                    self.data.userId = data.UserId;
                    resolve();
                }).catch(res => {
                    reject(res);
                });
            })
        },
        //正则验证密码
        checking: function (text) {
            if ((/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/.test(text))) {
                return true;
            } else {
                return false;
            }
        },
        //重置密码
        resetPswd: function (field) {
            return new Promise((resolve, reject) => {

                lobsterlayui.POST("/admin/v1/usersetup/ResetPswd", field).then(data => {
                    resolve(data);
                }).catch(res => {
                    reject(res);
                });

            })
        },

    }, false);


</script>


<script type="text/html" id="stepTemp">
    <div class="bznr">
        <div class="xh bgblue">1</div>
        <div class="xhtxt">
            身份验证
        </div>
    </div>
    <div class="bzline bdblue"></div>
    <div class="bznr">
        {{# if(d.step>=1){ }}
        <div class="xh bgblue">2</div>
        {{#  }else{ }}
        <div class="xh bggray">2</div>
        {{#  }}}
        <div class="xhtxt">
            重置密码
        </div>
    </div>
    {{# if(d.step>=1){ }}
    <div class="bzline bdblue"></div>
    {{#  }else{ }}
    <div class="bzline bdgray"></div>
    {{#  }}}
    <div class="bznr">
        {{# if(d.step>=2){ }}
        <div class="xh bgblue">3</div>
        {{#  }else{ }}
        <div class="xh bggray">3</div>
        {{#  }}}
        <div class="xhtxt">
            完成
        </div>
    </div>
</script>